{include file="header.html"}

<script type="text/javascript" src="http://ecmall.liuzongyang.com:4080/admin/templates/js/admin.js"
        charset="utf-8"></script>
<script type="text/javascript" src="http://ecmall.liuzongyang.com:4080/admin/templates/js/jslang.js"></script>


<!-- 引入 ECharts 文件 -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<style>
    .welcome_detaile .item .mt span {
        padding-top: 40px;
    }
</style>
<div id="rightTop">
    <p>
        {$lang.hello}<b>{$admin.user_name}</b>{$lang.welcome_to_ecmall}
        {$lang.last_login} {$admin.last_login|date:complete} {$lang.last_ip} {$admin.last_ip}
    </p>
</div>
<dl id="rightCon">
    <div class="welcome_detaile">
        <div class="item goods_item">
            <div class="mt">
                <span>{$lang.transaction_data}</span>
            </div>
            <div class="mc">
                <ul>
                    <li>
                        <strong><a href="{url app=goods}">{$lang.order_number}</a></strong>
                        <span>{$order_number} {$lang.individual}</span>
                    </li>
                    <li class="li_even">
                        <strong><a href="{url app=goods}">{$lang.payment_number}</a></strong>
                        <span>{$payment_number} {$lang.individual}</span>
                    </li>
                    <li>
                        <strong><a href="{url app=goods}">{$lang.order_total_amount}</a></strong>
                        <span>{$order_total_amount} {$lang.currency}</span>
                    </li>
                    <li class="li_even">
                        <strong><a href="{url app=goods}">{$lang.payment_amount}</a></strong>
                        <span>{$payment_amount} {$lang.currency}</span>
                    </li>

                    <li>
                        <strong><a href="{url app=goods}">{$lang.repeat_purchase}</a></strong>
                        <span>{$repeat_purchase} {$lang.man}</span>
                    </li>
                    <li class="li_even">
                        <strong><a href="{url app=goods}">{$lang.conversion_rate}</a></strong>
                        <span>{$conversion_rate}</span>
                    </li>

                    <li>
                        <strong><a href="{url app=goods}">{$lang.repeat_purchase_rate}</a></strong>
                        <span>{$repeat_purchase_rate}</span>
                    </li>
                    <li class="li_even">
                        <strong><a href="{url app=goods}">{$lang.payment_rate}</a></strong>
                        <span>{$payment_rate}</span>
                    </li>

                    <li>
                        <strong><a href="{url app=goods}">{$lang.amount_of_payment}</a></strong>
                        <span>{$amount_of_payment} {$lang.currency}</span>
                    </li>
                    <li class="li_even">
                        <strong><a href="{url app=goods}">{$lang.method_of_payment}</a></strong>
                        <span>支付宝：{$sum_alipay_app_number}/微信：{$sum_wxpay_app_number}</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 图表start -->
        <div class="item goods_item">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 900px;height:600px;"></div>
            <script type="text/javascript">
                // 获取收货地区统计信息
                function getRegionStatics() {
                    // 初始化
                    var result = false;
                    // 同步处理
                    $.ajaxSetup({async: false});
                    // 逻辑
                    $.get('/admin/index.php?app=stat_transdata&act=getregionstatics', function (response) {
                        result = response;
                    });
                    // 返回
                    return result;
                }

                // 拼接成数组
                var statics = JSON.parse(getRegionStatics());

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据

                var geoCoordMap = {
                    '新疆维吾尔自治区': [86.61, 40.79],
                    '西藏自治区': [89.13, 30.66],
                    '黑龙江省': [128.34, 47.05],
                    '吉林省': [126.32, 43.38],
                    '辽宁省': [123.42, 41.29],
                    '内蒙古自治区': [112.17, 42.81],
                    '北京': [116.40, 40.40],
                    '宁夏回族自治区': [106.27, 36.76],
                    '山西省': [111.95, 37.65],
                    '河北省': [115.21, 38.44],
                    '天津': [117.04, 39.52],
                    '青海省': [97.07, 35.62],
                    '甘肃省': [103.82, 36.05],
                    '山东省': [118.01, 36.37],
                    '陕西省': [108.94, 34.46],
                    '河南省': [113.46, 34.25],
                    '安徽省': [117.28, 31.86],
                    '江苏省': [120.26, 32.54],
                    '上海': [121.46, 31.28],
                    '四川省': [103.36, 30.65],
                    '湖北省': [112.29, 30.98],
                    '浙江省': [120.15, 29.28],
                    '重庆': [107.51, 29.63],
                    '湖南省': [112.08, 27.79],
                    '江西省': [115.89, 27.97],
                    '贵州省': [106.91, 26.67],
                    '福建省': [118.31, 26.07],
                    '云南省': [101.71, 24.84],
                    '台湾省': [121.01, 23.54],
                    '广西壮族自治区': [108.67, 23.68],
                    '广东省': [113.98, 22.82],
                    '海南省': [110.03, 19.33],
                    '澳门特别行政区': [113.54, 22.19],
                    '香港特别行政区': [114.17, 22.32],
                };

                // 固定转换函数
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };

                option = {
                    backgroundColor: '#404a59',
                    title: {
                        text: '订单地域分布',
                        subtext: '可以看到订单的收货地址区域总体分布情况',
                        sublink: '',
                        x: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.name + ' : ' + params.value[2];
                        }
                    },
                    dataRange: {
                        min: 0,
                        max: 200,
                        calculable: true,
                        color: ['#d94e5d', '#eac736', '#50a3ba'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: true,
                                color: '#ffffff'
                            },
                            normal: {
                                show: true,
                                fontSize: '10',
                                color: '#cccccc'
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d',
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            }
                        }
                    },
                    series: [
                        {
                            name: '订单分布',
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            // 下面是有数据的项目，从后台获取
                            data: convertData(
                                statics
                            ),
                            symbolSize: 12,
                            label:
                                {
                                    normal: {
                                        show: false
                                    }
                                    ,
                                    emphasis: {
                                        show: false
                                    }
                                }
                            ,
                            itemStyle: {
                                emphasis: {
                                    borderColor: '#fff',
                                    borderWidth:
                                        1
                                }
                            }
                        }
                    ]
                }
                ;

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>
        </div>
        <!-- 图表end -->

    </div>
</dl>
{include file="footer.html"}
